<template>
    <el-menu
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%;"
            default-active="/Home"
            :collapse="isCollapse"
            :collapse-transition="false"
            router
    >
       <el-menu-item index="/Home">
           <i class="el-icon-s-home"></i>
           <span slot="title">首页</span>
       </el-menu-item>
      <el-menu-item index="/Announcement">
        <i class="el-icon-info"></i>
        <span slot="title">公告</span>
      </el-menu-item>

      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-grid"></i>
          <span>SNS</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="'/'+item.menuclick" v-for="(item,i) in menu2" :key="i">
            <i :class="item.menuicon"></i>
            <span slot="title">{{item.menuname}}</span>
          </el-menu-item>
        </el-menu-item-group>

      </el-submenu>

      <el-submenu index="/Manage">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="'/'+item.menuclick" v-for="(item,i) in menu" :key="i">
              <i :class="item.menuicon"></i>
              <span slot="title">{{item.menuname}}</span>
          </el-menu-item>
        </el-menu-item-group>

      </el-submenu>

    </el-menu>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return {
            }
        },
        computed:{
            "menu":{
                get(){
                    return this.$store.state.menu
                }
            },
          "menu2":{
            get(){
              return this.$store.state.menu2
            }
          }
        },
        props:{
            isCollapse:Boolean
        }
    }
</script>

<style scoped>

</style>
<!--提交刷新用-->